define([],function (){
    const MuForm = {
        template:`<el-input v-model="inputValue"  v-if="inputType=='text'||inputType=='string'||inputType=='input'" :placeholder="placeholder" :style="{width:width}"></el-input>
<el-input v-model="inputValue"  v-if="inputType=='number'" type="number" :placeholder="placeholder" :style="{width:width}"></el-input>
    <el-input v-model="inputValue" type="password" show-password  v-if="inputType=='password'" :placeholder="placeholder" :style="{width:width}"></el-input>
    <mu-avatar-upload v-if="inputType=='image'" v-model="inputValue"></mu-avatar-upload>
    <el-input v-model="inputValue" type="textarea" rows="5"  v-if="inputType=='textarea'" :placeholder="placeholder" :style="{width:width}" ></el-input>
    <el-switch
                           v-if="inputType=='switch'"
                        v-model="inputValue"
                        :active-value="1"
                        :inactive-value="0">
                </el-switch>
                <el-select :style="{width:width}" clearable :multiple="multiple"  v-if="inputType=='select'" v-model="inputValue" :placeholder="placeholder">
                    <el-option
                      v-for="item in options"
                      :key="item[valueField]"
                      :label="item[labelField]"
                      :value="item[valueField]">
                    </el-option>
                 </el-select>
                 <el-select :style="{width:width}" clearable :multiple="true"  v-if="inputType=='selects'" v-model="inputValue" :placeholder="placeholder">
                    <el-option
                      v-for="item in options"
                      :key="item[valueField]"
                      :label="item[labelField]"
                      :value="item[valueField]">
                    </el-option>
                 </el-select>
                 <el-radio-group v-if="inputType=='radio'" v-model="inputValue" :style="{width:width}">
                    <el-radio v-for="item in options" :label="item[valueField]">{{item[labelField]}}</el-radio>
                </el-radio-group>
                <el-checkbox-group v-if="inputType=='checkbox'" v-model="inputValue" :style="{width:width}">
                    <el-checkbox v-for="item in options" :label="item[valueField]">{{item[labelField]}}</el-checkbox>
              </el-checkbox-group>
                 <el-color-picker v-model="inputValue" v-if="inputType=='color'" :style="{width:width}"></el-color-picker>
                 <number-range v-if="inputType=='number_range'"  v-model="inputValue" :width="width" :placeholder="placeholder"></number-range>
                 <div v-if="inputType=='img'" :style="{width:width}"><mu-avatar-upload v-model="inputValue"></mu-avatar-upload></div>
                 <div v-if="inputType=='imgs'" :style="{width:width}"><mu-avatar-uploads v-model="inputValue"></mu-avatar-uploads></div>
`,
        emits:['update:modelValue'],
        data(){
            return {
                inputValue:this.modelValue
            }
        },
        props:{
            modelValue:{
                type:Object,
                default:''
            },
            multiple:{
                type:Boolean,
                default:false
            },
            labelField:{
                type:String,
                default:'label'
            },
            valueField:{
                type:String,
                default:'value'
            },
            children:{
                type:String,
                default:'children'
            },
            options:{
                type:Array,
                default:[]
            },
            inputType:{
                type:String,
                default:'text'
            },
            width:{
                type:String,
                default:'360px'
            },
            placeholder:{
                type:String,
                default:''
            },
            minRows:{
                type:Number,
                default:3
            },
            maxRows:{
                type:Number,
                default:5
            }
        },
        watch:{
            inputValue:function(val){
                // console.log(val)
                this.$emit('update:modelValue',val)
            },
            modelValue:function(val){
                this.inputValue = val
            }
        },
        methods:{
            // changeInput(e){
            //     console.log(e)
            // }
        }
    }
    return MuForm
})